"use client";
import { useTranslations } from "next-intl";
import { FC, PropsWithChildren, useRef, useState } from "react";
import "./page.scss";

interface Props {}
const App: FC<PropsWithChildren<Props>> = (props) => {
    const t = useTranslations("FaqPage");

    const sliderRef = useRef<HTMLDivElement>(null);
    const [num, setNum] = useState(100);
    const [money, setMoney] = useState("5000");
    const handleSlide: any = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
        if (sliderRef.current) {
            const startX = sliderRef.current.getBoundingClientRect().x;
            const x = e.clientX - startX;
            const xRem = x / (144 * 0.6);
            const intNum = Math.round(10000 * xRem) - Math.round((10000 * xRem) % 10);
            setNum(intNum);
            const m = intNum * 50;
            let r = "";
            const arr = m.toString().split("");
            arr.forEach((item, i) => {
                if (i !== arr.length - 1 && (arr.length - i - 1) % 3 === 0) {
                    r += item + ",";
                } else {
                    r += item;
                }
            });

            setMoney(r);

            const scale = (Math.round(xRem * 10000) / 100.0).toFixed(2) + "%";
            sliderRef.current.style.width = scale;
        }
    };
    return (
        <div className="content">
            <div className="referralFaq referralFaq referral-router-view">
                <div className="content">
                    <h2>{t("title1")}</h2>
                    <div>{t("content1")}</div>
                </div>
                <div className="content">
                    <h2>{t("title2")}</h2>
                    <div>{t("content2")}</div>
                </div>
                <div className="content">
                    <h2>{t("title3")}</h2>
                    <div>{t("content3")}</div>
                </div>
                <div className="content">
                    <h2>{t("title4")} </h2>
                    <div>{t("content4")}</div>
                    <div className="link">
                        <a href="">{t("link1")}</a>
                        <a href="">{t("link2")}</a>
                    </div>
                </div>
                <div className="imgContent rowReverse">
                    <img src="/img/cash.png" alt="" />
                    <div>
                        {t("number")} &gt; {num}
                        <br />
                        {t("Comissão")} &gt; {t("R$")} {money} {t("money")}
                    </div>
                    <div
                        className="slider van-slider"
                        style={{ height: "0.02rem" }}
                        onClick={handleSlide}
                    >
                        <div
                            className="van-slider__bar"
                            style={{ width: "0.900901%", background: "rgb(0, 157, 128)" }}
                            ref={sliderRef}
                        >
                            <div role="slider" className="van-slider__button-wrapper">
                                <div className="img"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="relationSchema">
                    <div className="groupTitle">{t("title5")}</div>
                    <img src="/img/group_br.webp" alt="" className="groupImg" />
                    <ul className="rules">
                        <li>
                            {t("content5-1")}
                            <span style={{ color: "red" }}>{t("red1")}</span>
                        </li>
                        <li>{t("content5-2")}</li>
                    </ul>
                </div>
                <div className="content">
                    <h2>{t("title6")}</h2>
                    <div>
                        <p>{t("content6-1")}</p>
                        <p>{t("content6-2")}</p>
                        <p>{t("content6-3")}</p>
                    </div>
                </div>
            </div>
        </div>
    );
};
export default App;